<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>新增商品</span>
          <el-button @click="goBack" type="primary" plain>返回列表</el-button>
        </div>
      </template>
      
      <el-form ref="goodsFormRef" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品名称" prop="goodsName" required>
              <el-input v-model="form.goodsName" placeholder="请输入商品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品价格" prop="goodsPrice" required>
              <el-input-number 
                v-model="form.goodsPrice" 
                :precision="2" 
                :min="0" 
                :max="999999"
                style="width: 100%"
                placeholder="请输入商品价格"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品数量" prop="goodsNumber" required>
              <el-input-number 
                v-model="form.goodsNumber" 
                :min="0" 
                :max="999999"
                style="width: 100%"
                placeholder="请输入商品数量"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计量单位" prop="unit">
              <el-input v-model="form.unit" placeholder="请输入计量单位" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品状态" prop="goodsStatus">
              <el-select v-model="form.goodsStatus" placeholder="请选择商品状态" style="width: 100%">
                <el-option label="上架" :value="1" />
                <el-option label="下架" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="submitForm" :loading="submitLoading">保存商品</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup name="GoodsAdd">
import * as goodsApi from "@/api/lkshop/good";
import useUserStore from "@/store/modules/user";

const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const router = useRouter();

const goodsFormRef = ref();
const submitLoading = ref(false);

const form = reactive({
  goodsName: '',
  goodsPrice: null,
  goodsNumber: null,
  unit: '',
  goodsStatus: 1,
  businessId: null
});

const rules = reactive({
  goodsName: [{ required: true, message: "商品名称不能为空", trigger: "blur" }],
  goodsPrice: [{ required: true, message: "商品价格不能为空", trigger: "blur" }],
  goodsNumber: [{ required: true, message: "商品数量不能为空", trigger: "blur" }],
  unit: [{ required: true, message: "计量单位不能为空", trigger: "blur" }]
});

function submitForm() {
  proxy.$refs.goodsFormRef.validate(valid => {
    if (valid) {
      submitLoading.value = true;
      form.businessId = userStore.businessId;
      
      goodsApi.addGood(form).then(response => {
        proxy.$modal.msgSuccess("新增成功");
        goBack();
      }).catch(() => {
        submitLoading.value = false;
      });
    }
  });
}

function resetForm() {
  proxy.$refs.goodsFormRef.resetFields();
  Object.assign(form, {
    goodsName: '',
    goodsPrice: null,
    goodsNumber: null,
    unit: '',
    goodsStatus: 1,
    businessId: null
  });
}

function goBack() {
  router.push('/lkshop/goods');
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 